/***
 * this指向
 *
 *
 */
import React, { Component } from 'react'

export default class App extends Component {
  // 方法二  在构造函数中绑定this
  constructor() {
    // 调用父类的方法
    super()
    this.handle1 = this.handle1.bind(this)
  }
  // 类成员属性
  num = 100
  handle() {
    // 事件触发绑定的事件处理方法  this指向何处？
    // 事件的触发导致this执行丢失了  默认执行window对象，在js严格模式下指向了undefined
    console.log(this)
    console.log(this.num)
  }
  handle1() {
    console.log(this)
    console.log(this.num)
  }
  // 方法三: 事件处理方法通过箭头函数定义
  handle2 = () => {
    console.log(this)
    console.log(this.num)
  }
  handle4() {
    console.log(this)
    console.log(this.num)
  }
  render() {
    return (
      <div>
        {/* 事件绑定处理方法不能够加()  加()代表立即调用 但是此处是通过事件触发 */}
        {/* 方法一 通过bind传递绑定this */}
        {/* bind 传参不立即执行  call apply 绑定传参立即执行 参数 单个参数和数组参数 */}
        <button onClick={this.handle.bind(this)}>获取num</button>
        <div>
          <button onClick={this.handle1}>获取num1</button>
        </div>
        <div>
          <button onClick={this.handle2}>获取num2</button>
        </div>
        {/* 方法四：事件触发箭头函数 箭头函数再调用事件处理方法 */}
        {/* 事件触发箭头函数后，要立即调用事件处理方法 */}
        <div>
          <button onClick={() => this.handle2()}>获取num3</button>
        </div>
      </div>
    )
  }
}
